<template>
  <view class="account-list-content" :style="{
    background: isFill ? '' : '#fff',
  }" :data-theme="themeStyle">

    <view v-if="!isFill">
      <view class="edit-item">
        <text class="tit">接收方姓名</text>
        <input class="desc uni-input" type="text" maxlength="30" placeholder="请输入接收方姓名" name="name"
          v-model="formData.realname" />
      </view>
      <view class="edit-item">
        <text class="tit">联系手机号</text>
        <input class="desc uni-input" type="number" maxlength="11" placeholder="请输入联系手机号" v-model="formData.mobile" />
      </view>

      <view class="edit-item">
        <text class="tit">身份证号</text>
        <input class="desc uni-input" type="text" maxlength="18" placeholder="请输入身份证号" v-model="formData.card_no" />
      </view>

      <view class="edit-item">
        <text class="tit">身份证正面</text>
        <view class="upload-item">
          <image v-if="formData.id_front" :src="$util.img(formData.id_front)" style="width: 160px; height: 100px"
            @click="fSelect">
          </image>
          <image v-else :src="require('@/static/idCardFront.jpg')" style="width: 160px; height: 100px" @click="fSelect">
          </image>
        </view>
      </view>

      <view class="edit-item">
        <text class="tit">身份证反面</text>
        <view class="upload-item">
          <image v-if="formData.id_back" :src="$util.img(formData.id_back)" style="width: 160px; height: 100px"
            @click="backCardSelect">
          </image>
          <image v-else :src="require('@/static/idCardBack.jpg')" style="width: 160px; height: 100px"
            @click="backCardSelect">
          </image>
        </view>
      </view>

      <view class="edit-item">
        <text class="tit">银行卡照片</text>
        <view class="upload-item">
          <image v-if="formData.bank_card_img" :src="$util.img(formData.bank_card_img)"
            style="width: 160px; height: 100px" @click="bankCardSelect">
          </image>
          <image v-else :src="require('@/static/bankCard.jpg')" style="width: 160px; height: 100px"
            @click="bankCardSelect">
          </image>
        </view>
      </view>

      <view class="edit-item">
        <text class="tit">收款账号开户名</text>
        <input class="desc uni-input" type="text" maxlength="50" placeholder="请输入收款账号名称"
          v-model="formData.branch_bank_name" />
      </view>

      <view class="edit-item">
        <text class="tit">收款账号卡号</text>
        <input class="desc uni-input" type="text" maxlength="50" placeholder="请输入收款账号卡号"
          v-model="formData.bank_account" />
      </view>

    </view>

    <view v-if="isFill" class="result">
      <image :src="$util.img('upload/uniapp/pay_success.png')" mode="widthFix" class="result-image"></image>
      <text class="result-text">已开通分账</text>
    </view>


    <view class="btn" v-if="!isFill">
      <button type="primary" class="add" @click="saveAccount">保存</button>
    </view>
    <loading-cover ref="loadingCover"></loading-cover>
  </view>
</template>

<script>
import validate from "common/js/validate.js";
import globalConfig from "@/common/js/golbalConfig.js";
import imgCropping from "@/otherpages/components/img-cropping/cropping.vue";
export default {
  components: {
    imgCropping,
  },
  data() {
    return {
      formData: {
        // 姓名
        realname: "",
        // 手机号
        mobile: "",
        // 银行账号卡号
        bank_account: "",
        // 收款账号名称
        branch_bank_name: "",
        // 身份证号
        card_no: "",
        // 身份证正面
        id_front: "",
        // 身份证反面
        id_back: "",
        // 银行卡照片
        bank_card_img: "",
      },
      payList: [],
      index: 0,
      flag: false,
      transferType: [],
      accountInfo: null,
      /* 是否已填写过表单 */
      isFill: false,
    };
  },
  onLoad(option) {
    if (option.id) this.formData.id = option.id;
  },
  mixins: [globalConfig],
  onShow() {
    // 刷新多语言
    this.$langConfig.refresh();

    this.getAccountDetail(this.formData.id);
    uni.setNavigationBarTitle({
      title: "开通分账",
    });
  },
  methods: {
    fSelect() {
      const _self = this;
      this.$util.upload(
        1,
        {},
        (_res) => {
          console.log(_res);
          _self.formData.id_front = _res[0];
        },
        "/api/upload/img"
      );
    },
    backCardSelect() {
      const _self = this;
      this.$util.upload(
        1,
        {},
        (_res) => {
          _self.formData.id_back = _res[0];
        },
        "/api/upload/img"
      );
    },
    bankCardSelect() {
      const _self = this;
      this.$util.upload(
        1,
        {},
        (_res) => {
          _self.formData.bank_card_img =  _res[0];
        },
        "/api/upload/img"
      );
    },
    getAccountDetail(id) {
      const _self = this;
      this.$api.sendRequest({
        url: "/api/memberbankaccount/info",
        data: {
          // id: this.formData.id,
        },
        success: (res) => {
          if (res.code == 0 && res.data) {
            this.accountInfo = res.data;
            this.formData.realname = res.data.realname;
            this.formData.mobile = res.data.mobile;
            this.formData.bank_account = res.data.bank_account;
            this.formData.card_no = res.data.card_no;
            this.formData.branch_bank_name = res.data.branch_bank_name;
            this.formData.id_front = _self.$util.img(res.data.id_front);
            this.formData.id_back = _self.$util.img(res.data.id_back);
            this.formData.bank_card_img = _self.$util.img(res.data.bank_card_img);

            this.isFill = true;
          }
          if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
        },
        fail: (res) => {
          if (this.$refs.loadingCover) this.$refs.loadingCover.hide();

        },
      });
    },
    bindPickerChange(e) {
      this.index = e.detail.value;
      let value = "";
      for (let i in this.transferType) {
        if (this.transferType[i] == this.payList[this.index]) {
          value = i;
        }
      }
    },
    vertify() {
      this.formData.realname = this.formData.realname.trim();
      this.formData.mobile = this.formData.mobile.trim();
      this.formData.bank_account = this.formData.bank_account.trim();
      this.formData.branch_bank_name = this.formData.branch_bank_name.trim();
      this.formData.card_no = this.formData.card_no.trim();
      var rule = [
        {
          name: "realname",
          checkType: "required",
          errorMsg: "请输入姓名",
        },
        {
          name: "mobile",
          checkType: "required",
          errorMsg: "请输入手机号",
        },
        {
          name: "bank_account",
          checkType: "required",
          errorMsg: "请输入银行卡卡号",
        },
        {
          name: "branch_bank_name",
          checkType: "required",
          errorMsg: "请输入收款账号名称",
        },
        {
          name: "card_no",
          checkType: "required",
          errorMsg: "请输入身份证号",
        },
        {
          name: "id_front",
          checkType: "required",
          errorMsg: "请上传身份证正面照片",
        },
        {
          name: "id_back",
          checkType: "required",
          errorMsg: "请上传身份证反面照片",
        },
        {
          name: "bank_card_img",
          checkType: "required",
          errorMsg: "请请上传银行卡照片",
        },
      ];

      var checkRes = validate.check(this.formData, rule);
      if (checkRes) {
        return true;
      } else {
        this.$util.showToast({
          title: validate.error,
        });
        this.flag = false;
        return false;
      }
    },
    saveAccount() {
      if (this.flag) return;
      this.flag = true;
      if (this.vertify()) {
        console.log("this.formData", this.formData);
        // return
        this.$api.sendRequest({
          url: "/api/memberbankaccount/add",
          data: this.formData,
          success: (res) => {
            if (res.code == 0) {
              this.$util.showToast({
                title: "提交成功",
              });
              uni.navigateBack({
                delta: 1,
              });
            } else {
              this.flag = false;
              this.$util.showToast({
                title: res.message,
              });
            }
          },
          fail: (res) => {
            this.flag = false;
          },
        });
      }
    },
  },
};
</script>

<style lang="scss">
.account-list-content {
  margin: 0 $margin-both $margin-updown;
  padding: $padding 30rpx 0;
  // background-color: #fff;
  border-radius: $border-radius;

  .edit-item {
    display: flex;
    align-items: center;
    padding: 0 $margin-both;
    padding: 30rpx 0;
    background-color: #fff;

    .tit {
      width: 200rpx;
    }

    .desc {
      flex: 1;
      margin-left: 20rpx;
      padding: 0;
    }

    &:first-of-type {
      margin-top: $uni-spacing-row-base;
    }

    .picker {
      flex: 1;

      text {
        &:last-child {
          line-height: 50rpx;
          float: right;
          color: $color-tip;
          font-size: $font-size-activity-tag;
        }
      }
    }
  }
}

.account-list-content>.edit-item+.edit-item {
  border-top: 2rpx solid $color-line;
}

.add {
  margin-top: 60rpx;
  height: 80rpx;
  line-height: 80rpx !important;
  border-radius: 80rpx;
  font-weight: 500;
  width: calc(100% - 60rpx);
  margin-left: 30rpx;
}

.btn {
  // position: fixed;
  left: 0;
  width: 100%;
  bottom: 30rpx;
  height: auto;
  padding-bottom: constant(safe-area-inset-bottom);
  /*兼容 IOS<11.2*/
  padding-bottom: env(safe-area-inset-bottom);
  /*兼容 IOS>11.2*/
}

.upload-item {
  width: 310rpx;
  padding: 20rpx;
  text-align: center;

  .title {
    color: #999;
    font-size: 28rpx;
    line-height: 28rpx;
  }
}

.result {
  padding-top: 94rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  image {
    // width: 200px;.
    width: 168rpx;
    height: 120rpx;
  }

  .result-text {
    margin-top: 66rpx;
  }
}
</style>
